<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>File Upload Demo</title>
<link rel="stylesheet" href="/assets/libs/layui/css/layui.css" media="all">
 <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<script type="text/javascript" src="/assets/libs/jquery-3.2.1.min.js"></script>
<script src="/assets/libs/layui/layui.js" charset="utf-8"></script>

<style>
.layui-upload-img {
    width: 92px;
    height: 92px;
    margin: 0 10px 10px 0;
}
img {
    border: none;
}
.layui-btn, .layui-edge, .layui-inline, img {
    vertical-align: middle;
}
.layui-inline, img {
    display: inline-block;
    vertical-align: middle;
}
</style>
	<link th:each="css:${theme.css}" rel="stylesheet" th:href="${css}+'?'+${cacheKey}">
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>文件替换</legend>
</fieldset>

<div class="layui-upload">
  <button type="button" class="layui-btn" id="test1">上传图片</button>
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="demo1"  src="/service-storage/sys-file/download?id=460451400724250624">
    <p id="demoText"></p>
  </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>文件上传</legend>
</fieldset>

<div class="layui-upload">
  <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
  <div class="layui-upload-list">
    <table class="layui-table">
      <thead>
        <tr><th>文件名</th>
        <th>大小</th>
        <th>状态</th>
        <th>操作</th>
      </tr></thead>
      <tbody id="demoList"></tbody>
    </table>
  </div>
  <button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div>



<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>传统表单多文件示例</legend>
</fieldset>
<form action="/service-storage/sys-file/upload"  method="post"  enctype="multipart/form-data" target="xx">
       <label class="ui_button" for="xFile">上传文件</label><br><br>
       <input type="file" name="xFile1"  id="xFile1"  accept="*.*" ><br><br>
       <input type="file" name="xFile2"  id="xFile2"  accept="*.*" ><br><br>
      	<button type="submit">上传</button><br><br>
</form>
 <iframe name="xx"  width="90%"></iframe>



 <script>
 var sysCode="demo";
 layui.use('upload', function(){
	  var $ = layui.jquery
	  ,upload = layui.upload;

	//普通图片上传
	  var uploadInst = upload.render({
	    elem: '#test1'
	    ,url:  '/service-storage/sys-file/upload' //改成您自己的上传接口
	    ,before: function(obj){
	      //预读本地文件示例，不支持ie8
	      obj.preview(function(index, file, result){
	        $('#demo1').attr('src', result); //图片链接（base64）
	      });
	    }
	    ,done: function(res){
	      //如果上传失败
	      if(res.code > 0){
	        return layer.msg('上传失败');
	      }
	      //上传成功
	    }
	    ,error: function(){
	      //演示失败状态，并实现重传
	      var demoText = $('#demoText');
	      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
	      demoText.find('.demo-reload').on('click', function(){
	        uploadInst.upload();
	      });
	    }
	  });

 //多文件列表示例
 var demoListView = $('#demoList')
 ,uploadListIns = upload.render({
   elem: '#testList'
   ,url: '/service-storage/sys-file/upload' //改成您自己的上传接口
   ,accept: 'file'
   ,multiple: true
   ,auto: false
   ,bindAction: '#testListAction'
   ,choose: function(obj){
     var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
     //读取本地文件
     obj.preview(function(index, file, result){
       var tr = $(['<tr id="upload-'+ index +'">'
         ,'<td>'+ file.name +'</td>'
         ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
         ,'<td>等待上传</td>'
         ,'<td>'
           ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
           ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
         ,'</td>'
       ,'</tr>'].join(''));

       //单个重传
       tr.find('.demo-reload').on('click', function(){
         obj.upload(index, file);
       });

       //删除
       tr.find('.demo-delete').on('click', function(){
         delete files[index]; //删除对应的文件
         tr.remove();
         uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
       });

       demoListView.append(tr);
     });
   }
   ,done: function(res, index, upload){
	   debugger
     if(res.success && res.data.length>0){ //上传成功
       var tr = demoListView.find('tr#upload-'+ index)
       ,tds = tr.children();
       tds.eq(2).html('<span style="color: #5FB878;">上传成功</span> | <a target="_blank" href="/service-storage/sys-file/download?id='+res.data[0].fileId+'"><span style="color: #5FB878;">下载</span></a>');
       tds.eq(3).html(''); //清空操作
       return delete this.files[index]; //删除文件队列已经上传成功的文件
     }
     this.error(index, upload);
   }
   ,error: function(index, upload) {
	   debugger
     var tr = demoListView.find('tr#upload-'+ index)
     ,tds = tr.children();
     tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
     tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
   }
 });
 });
 </script>

</body>
</html>
